<template>
  <div class="rain_condition">
    <div class="rain_condition_top">
      <div class="rain_condition_top_text">雨水情</div>
    </div>
    <div class="rain_condition_middle">
      <div class="current rain_condition_middle_title">
        <div class="top">
          <div class="top_left">23</div>
          <div class="top_right">m</div>
        </div>
        <div class="bottom">当前水位</div>
      </div>

      <div class="speed rain_condition_middle_title">
        <div class="top">
          <div class="top_left">420</div>
          <div class="top_right">mm/s</div>
        </div>
        <div class="bottom">水位上涨速度</div>
      </div>

      <div class="max rain_condition_middle_title">
        <div class="top">
          <div class="top_left">300</div>
          <div class="top_right">mm</div>
        </div>
        <div class="bottom">最大降雨量</div>
      </div>

      <div class="min rain_condition_middle_title">
        <div class="top">
          <div class="top_left">120</div>
          <div class="top_right">mm</div>
        </div>
        <div class="bottom">最小降雨量</div>
      </div>
    </div>
    <div class="rain_condition_bottom">
      <div id="qstViews" style="width: 460px; height: 200px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      option: {
        //  backgroundColor:'#323a5e',
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            fontSize: 12,
          },
        },
        grid: {
          left: "5%",
          right: "0%",
          bottom: "5%",
          top: "23%",
          containLabel: true,
        },
        legend: {
          data: ["实时降雨", "历史降雨"],
          icon: "circle",
          center: "center",
          top: 15,
          textStyle: {
            color: "#fff",
            fontFamily: "Oppo",
            fontWidth: "normal",
            fontSize: 12,
            padding: [0, 0],
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 20,
        },
        xAxis: {
          type: "category",
          data: ["9点", "10点", "11点", "12点", "13点"],
          axisLine: {
            show: true,  //添加x轴最底下的线
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            color: "rgba(255, 255, 255, 0.85);",
            fontFamily: "Tencent",
            fontSize: "12px",
            align: "center",
            textStyle: {
              fontFamily: "Microsoft YaHei",
            },
          },
          nameGap: 15,
        },

        yAxis: {
          type: "value",
          splitNumber: 4,
          scale: true,
          min: 0,
          boundaryGap: [0.2, 0.2],
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.1)",
              type: "dashed",
            },
          },
          axisLabel: {
            // formatter: "{value} °C"
            color: "rgba(255, 255, 255, 0.65)",
            // fontFamily: "monospace",
            fontFamily: "Tencent",
            fontSize: "12px",
          },
        },
        series: [
          {
            name: "实时降雨",
            type: "bar",
            barGap: "40%",
            barWidth: "16px",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#ffffff",
                    fontSize: 10,
                  },
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#5FD5EC",
                  },
                  {
                    offset: 1,
                    color: "#5FD5EC",
                  },
                ]),
                // barBorderRadius: 12,
              },
            },
            data: [100, 200, 300, 400, 200],

            // markLine: {
            //   silent: true,
            //   symbol: "none",
            //   label: {
            //     position: "middle",
            //     formatter: "{b}",
            //   },
            //   data: [
            //     {
            //       name: "目标值",
            //       yAxis: 350,
            //       lineStyle: {
            //         color: "#ffc832",
            //       },
            //       label: {
            //         position: "start",
            //         formatter: "{b}",
            //         textStyle: {
            //         color: "#ffc832",
            //         fontSize: 10,
            //       },
            //       },
            //     },
            //   ],
            // },



          },
          {
            name: "历史降雨",
            type: "bar",
            barGap: "40%",
            barWidth: "16px",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "#ffffff",
                    fontSize: 10,
                  },
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#2276FC",
                  },
                  {
                    offset: 1,
                    color: "#2276FC",
                  },
                ]),
                // barBorderRadius: 11,
              },
            },
            data: [110, 110, 110, 110, 110],
          },
        ],
      },
    };
  },
  mounted() {
    this.getEcharts();
  },
  methods: {
    getEcharts() {
      var chart = echarts.init(document.getElementById("qstViews"));
      chart.setOption(this.option);
    },
  },
};
</script>

<style lang="scss" scoped>
.rain_condition {
  .rain_condition_top {
    background: url("../../../../../../assets/images/home/top.png");
    background-size: cover;
    .rain_condition_top_text {
      padding-left: 16px;
      font-family: OPPOSans;
      font-style: normal;
      font-weight: normal;
      font-size: 18px;
      line-height: 24px;
      /* identical to box height */
      color: #ffffff;
    }
  }
  .rain_condition_middle {
    display: flex;
    justify-content: space-around;
    margin-top: 16px;
    .rain_condition_middle_title {
      display: flex;
      flex-direction: column;
      font-family: OPPOSans;
      font-style: normal;
      font-weight: normal;
    }

    .top {
      display: flex;
      align-items: flex-end;
      .top_left {
        font-size: 24px;
        line-height: 32px;
        /* identical to box height */

        color: #e8effb;
      }
      .top_right {
        font-size: 20px;
        line-height: 29px;
        /* identical to box height, or 144% */

        color: #e8effb;

        mix-blend-mode: normal;
        opacity: 0.4;
      }
    }
    .bottom {
      font-size: 14.4px;
      line-height: 29px;
      /* identical to box height, or 200% */
      display: flex;
      align-items: center;
      letter-spacing: 0.6px;
      color: #e8effb;
    }
  }
}
</style>